﻿
@{
    ViewBag.Title = "个人中心";
}

<link href="~/css/aui-personCenter.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="~/css/cropper.min.css">
<link type="text/css" href="~/css/mui.min.css" rel="stylesheet" />
<link href="~/css/common.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/lrz.mobile.min.js"></script>
<script type="text/javascript" src="~/dist/lrz.all.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/cropper.min.js"></script>
<script src="~/Scripts/aui-dialog.js"></script>

<script type="text/javascript">

    var dialog = new auiDialog({});

    $(function () {

        function toFixed2(num) {
            return parseFloat(+num.toFixed(2));
        }

        $('#cancleBtn').on('click', function () {
            $("#showEdit").fadeOut();
            $('#showResult').fadeIn();
        });

        $('#confirmBtn').on('click', function () {

            //显示加载动画
            $("#loading").show();

            $("#showEdit").fadeOut();

            var $image = $('#report > img');
            var dataURL = $image.cropper("getCroppedCanvas");
            var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
            $("#changeAvatar > img").attr("src", imgurl);
            $('#showResult').fadeIn();

            //获取Session
            $.ajax({
                url: "@Url.Action("GetSession")",
                type: "POST",
                contentType: 'application/json',
                data: {},
                dataType: "json",
                success: function (data, status) {
                    var dd = eval(data);

                    if (dd.code == "201") {
                        //对话框
                        dialog.alert({
                            title: "消息提示",
                            msg: dd.msg,
                            buttons: ['确定']
                        }, function (ret) {
                            console.log(ret);
                            window.location.href = "@Url.Action("Login")";
                        });
                    } else {

                        var cc = dd.result;
                        //上传头像
                        $.ajax({
                            url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/User/UpFile",
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({ imgurl: imgurl, Extension: ".jpg", Description: "个人头像", Size: imgurl.length, CreateBy: cc.UserId }),
                            dataType: "json",
                            success: function (data, status) {
                                var dd = eval(data);

                                if (dd.code == "200") {
                                    //对话框
                                    dialog.alert({
                                        title: "消息提示",
                                        msg: dd.msg,
                                        buttons: ['确定']
                                    }, function (ret) {
                                        console.log(ret);
                                        window.location.href = "@Url.Action("PersonCenter")";
                                    });
                                }
                                else {
                                    //对话框
                                    dialog.alert({
                                        title: "消息提示",
                                        msg: dd.msg,
                                        buttons: ['确定']
                                    }, function (ret) {
                                        console.log(ret);
                                        window.location.href = "@Url.Action("PersonCenter")";
                                    });
                                }

                                //隐藏加载动画
                                $("#loading").hide();
                            },
                            error: function (xhr, textStatus) {
                                console.log('错误')
                                console.log(xhr)
                                console.log(textStatus)
                            }
                        });

                    }
                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            });

        });

        function cutImg() {
            $('#showResult').fadeOut();
            $("#showEdit").fadeIn();
            var $image = $('#report > img');
            $image.cropper({
                aspectRatio: 1 / 1,
                autoCropArea: 0.7,
                strict: true,
                guides: false,
                center: true,
                highlight: false,
                dragCrop: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                zoom: -0.2,
                checkImageOrigin: true,
                background: false,
                minContainerHeight: 400,
                minContainerWidth: 300
            });
        }

        function doFinish(startTimestamp, sSize, rst) {
            var finishTimestamp = (new Date()).valueOf();
            var elapsedTime = (finishTimestamp - startTimestamp);
            //$('#elapsedTime').text('压缩耗时： ' + elapsedTime + 'ms');

            var sourceSize = toFixed2(sSize / 1024),
                resultSize = toFixed2(rst.base64Len / 1024),
                scale = parseInt(100 - (resultSize / sourceSize * 100));
            $("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
            cutImg();
        }

        $('#image').on('change', function () {
            var startTimestamp = (new Date()).valueOf();
            var that = this;
            lrz(this.files[0], {
                width: 800,
                height: 800,
                quality: 0.7
            })
                .then(function (rst) {
                    //console.log(rst);
                    doFinish(startTimestamp, that.files[0].size, rst);
                    return rst;
                })
                .then(function (rst) {
                    // 这里该上传给后端啦
                    // 伪代码：ajax(rst.base64)..
                    return rst;
                })
                .then(function (rst) {
                    // 如果您需要，一直then下去都行
                    // 因为是Promise对象，可以很方便组织代码 \(^o^)/~
                })
                .catch(function (err) {
                    // 万一出错了，这里可以捕捉到错误信息
                    // 而且以上的then都不会执行

                    alert(err);
                })
                .always(function () {
                    // 不管是成功失败，这里都会执行
                });
        });

        $.ajax({
            url: "@Url.Action("GetSession")",
            type: "POST",
            contentType: 'application/json',
            data: {},
            dataType: "json",
            success: function (data, status) {
                var dd = eval(data);

                if (dd.code == "201") {
                    //对话框
                    dialog.alert({
                        title: "消息提示",
                        msg: dd.msg,
                        buttons: ['确定']
                    }, function (ret) {
                        console.log(ret);
                        window.location.href = "@Url.Action("Login")";
                    });
                } else {
                    var cc = dd.result;
                    //获取个人信息
                    $.ajax({
                        url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/User/GetPartyBuildingUserModel",
                        type: "POST",
                        contentType: 'application/json',
                        async: true,
                        data: JSON.stringify({ UserId: cc.UserId }),
                        dataType: "json",
                        success: function (data, status) {
                            var dd = eval(data);
                            if (dd.code == "201") {
                                //对话框
                                dialog.alert({
                                    title: "消息提示",
                                    msg: dd.msg,
                                    buttons: ['确定']
                                }, function (ret) {
                                    console.log(ret);
                                    window.location.href = "@Url.Action("Login")";
                                });
                            }
                            else {
                                //绑定信息
                                var cc = dd.result;
                                $(".aui-card-list-hearder-pd").html(cc.UserTrueName);
                                $(".aui-card-list-content-img-pd img").prop("src", "http://shtdj.shanhaitian.gov.cn/AppInterface/" + cc.ImageUrl);
                            }

                            //隐藏加载动画
                            $("#loading").hide();

                        },
                        error: function (xhr, textStatus) {
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        }
                    });
                }

            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            }
        });

        //点击Logo触发上传头像事件
        $("#changeAvatar > img").click(function () {
            $("#image").click();
        });

    });
</script>


<header class="aui-bar aui-bar-nav" id="aui-header">
    <div class="aui-title">个人</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined"> <span class="aui-iconfont aui-icon-gear"></span> </a>
</header>
<section class="aui-content aui-content-logo">
    <div class="aui-card-list aui-border-t aui-border-b aui-card-red">
        <div id="changeAvatar" class="aui-card-list-content-padded aui-card-list-content-img-pd">
            <img src="~/image/default.jpg" alt="头像" />
        </div>
        <div class="aui-card-list-hearder-pd">
            张环
        </div>
        <div>
</section>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/yixiaofei.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    我的党费
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/jifen.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    我的积分
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/xinxi.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    个人资料
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/yuyue.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    我的申请
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/shenghuo.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    组织生活
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/paizhao.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    随手拍
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 2.2rem;">
                    <img src="~/image/guanyu.png" class="aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner-wz">
                    关于我们
                </div>
            </div>
        </li>

    </ul>
</div>


<!--上传头像Start-->
<div id="showResult" style="display:none;">
    <div style="width: 50%;margin: 0 auto;margin-top: 10px;">
        <input id="image" type="file" accept="image/*" capture="camera" />
    </div>
</div>
<div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 99999;">
    <div style="width:100%;position: absolute;top:10px;left:0px;">
        <button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
        <button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float:right;margin-right: 10px;">确定</button>
    </div>
    <div id="report">
        <img src="/image/mei.jpg" style="width: 300px;height:300px">
    </div>

</div>
<!--上传头像End-->

<!--加载动画Start-->
<div id="loading">
    <div class="loading">
        <img src="~/image/loading.gif" />
    </div>
</div>
<!--加载动画End-->